<template>
  <div class="app-container">
    <v-form-designer id="SelfFormDesigner" ref="SelfFormDesigner" style="width: 100%; height: 100%; margin-left: 0;" :designer-config="vForm.designerConfig" :global-dsv="dataCfgDsv">
      <el-button type="text" icon="el-icon-plus" size="mini" @click="handleSave">保存</el-button>
    </v-form-designer>
    <!--表单配置详情-->
    <el-dialog :title="saveFormCfg.formTitle" :visible.sync="saveFormCfg.formOpen" @close="cancelSaveForm" width="30%" :close-on-click-modal="false">
      <el-form ref="saveForm" :model="saveFormCfg.formData" :rules="saveFormCfg.formRules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="saveFormCfg.formData.formName" placeholder="输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="saveFormCfg.formData.remark" placeholder="输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSaveForm" :loading="saveFormCfg.formBtnLoading">确 定</el-button>
        <el-button @click="cancelSaveForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { getForm, addForm, updateForm } from '@/api/workflow/form'
import selfForm from "@/mixins/selfForm"

export default {
  mixins: [selfForm],
  components: {
  },
  data() {
    return {
      vForm: {
        designerConfig: {
          languageMenu: false,
          externalLink: false,
          formTemplates: false,
          //是否禁止修改唯一名称
          widgetNameReadonly: false,
          //是否显示组件事件属性折叠面板
          eventCollapse: true,
          //是否显示清空设计器按钮
          clearDesignerButton: true,
          //是否显示预览表单按钮
          previewFormButton: true,
          //是否显示导入JSON按钮
          importJsonButton: true,
          //是否显示导出JSON器按钮
          exportJsonButton: true,
          //是否显示导出代码按钮
          exportCodeButton: false,
          //是否显示生成SFC按钮
          generateSFCButton: false,
          //工具按钮栏最大宽度（单位px）
          //如新增按钮后不可见，请调大
          //如右侧空白区域过大，请调小
          toolbarMaxWidth: 420,
          //工具栏按钮最小宽度（单位px）
          //值必须小于toolbarMaxWidth
          toolbarMinWidth: 300,
          //表单设计器预设CSS代码
          presetCssCode: '',
          //表单设计器初始化自动清空内容
          /* 如设置为true，则刷新页面时也会清空设计器画布区域，慎用！*/
          resetFormJson: false,
          productName: 'FSG',
          productTitle: '表单设计',
          logoHeader: false,
        }
      },
      saveFormCfg: {
        formTitle: '保存表单设计',
        formOpen: false,
        formRules: {
          formName: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
          remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
        },
        formBtnLoading: false,
        formData: {
          formId: null,
          content: null,
          formName: null,
          remark: null
        }
      }
    }
  },
  created() {
    this.saveFormCfg.formData.formId =  this.$route.query && this.$route.query.formId;
  },
  mounted() {
    this.$nextTick(() => {
      // 非必要信息隐藏
      // let formHeaders = document.getElementById('SelfFormDesigner').getElementsByTagName('header')
      // if (formHeaders[0]) {
      //   formHeaders[0].style.display = 'none'
      // }
      // if (formHeaders[1]) {
      //   let ele = formHeaders[1].getElementsByClassName('left-toolbar')[0].getElementsByClassName('el-button-group')[0].style.display = 'none'
      // }

      // init formData
      if (this.saveFormCfg.formData.formId) {
        // this.$modal.loading("正在加载数据，请稍候...");
        getForm(this.saveFormCfg.formData.formId).then(res => {
          if (res.data.content) {
            this.$refs['SelfFormDesigner'].setFormJson(res.data.content)
            this.saveFormCfg.formData.formName = res.data.formName
            this.saveFormCfg.formData.remark = res.data.remark
          }
          // this.$modal.closeLoading();
        })
      }

    })
  },
  methods: {
    // 保存按钮
    handleSave() {
      this.saveFormCfg.formOpen = true
    },
    // 取消按钮
    cancelSaveForm() {
      this.saveFormCfg.formOpen=false
    },
    destorySaveForm() {
      this.saveFormCfg.formData = {
        formId: null,
        content: null,
        formName: null,
        remark: null
      };
      this.resetForm("saveForm");
    },
    /** 保存表单信息 */
    submitSaveForm(){
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          this.saveFormCfg.formData.content = JSON.stringify(this.$refs["SelfFormDesigner"].getFormJson())
          if (!this.saveFormCfg.formData.content) {
            this.$modal.msgError("请先设计表单！");
            return
          }
          let formReq = this.saveFormCfg.formData.formId ? updateForm : addForm
          this.saveFormCfg.formBtnLoading = true
          formReq(this.saveFormCfg.formData).then(response => {
            this.saveFormCfg.formBtnLoading = false
            this.saveFormCfg.formOpen = false;
            this.$modal.msgSuccess("操作成功");
            setTimeout(() => {
              this.destorySaveForm()
              // 关闭当前标签页并返回上个页面
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1)
            }, 1000);
          }).catch(error => {
            console.error(error);
            this.saveFormCfg.formBtnLoading = false
          });
        }
      });
    }
  }
}
</script>
  
<style lang='scss' scoped>

</style>
  